<template>
  <div class="main">
	  <div class="container">
		<div class="position-relative">
			<!-- 选项 -->
			<ul class="nav nav-tabs mb-3">
				<li class="nav-item">
					<a class="nav-link position-relative" href="/letter">朋友私信<span v-if="(ifshow ? (content.letterUnreadCount > 0) : false)" class="badge badge-danger">{{ ifshow ? content.letterUnreadCount : ''}}</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link position-relative active" href="/notice">系统通知<span v-if="(ifshow ? (content.noticeUnreadCount > 0) : false)" class="badge badge-danger">{{ifshow ? content.noticeUnreadCount : ''}}</span></a>
				</li>
			</ul>
		</div>

		<!-- 通知列表 -->
		<ul class="list-unstyled">
			<li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-if="(ifshow ? (content.commentNotice ? content.commentNotice.count > 0 : false) : false)" >
				<span v-if="(ifshow ? (content.commentNotice.unread > 0) : false)" class="badge badge-danger">{{ifshow ? content.commentNotice.unread : ''}}</span>
        <img src="http://static.nowcoder.com/images/head/reply.png" class="mr-4 user-header" alt="通知图标">
				<div class="media-body">
					<h6 class="mt-0 mb-3">
						<span>评论</span>
						<span class="float-right text-muted font-size-12">{{(ifshow ? content.commentNotice.message.createTime :'') | datatime}}</span>
					</h6>
					<div>
						<a :href="'/noticedetail/comment'">
              用户 <i>{{ifshow ? content.commentNotice.user.name : ''}}</i> 评论了你的<b>帖子</b> ...
            </a>
						<ul class="d-inline font-size-12 float-right">
							<li class="d-inline ml-2"><span class="text-primary">共 <i>{{ifshow ? content.commentNotice.count :''}}</i> 条会话</span></li>
						</ul>
					</div>
				</div>
			</li>
			<li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-if="(ifshow ? (content.likeNotice? content.likeNotice.count > 0 : false) : false)">
				<span v-if="(ifshow ? (content.likeNotice.unread > 0) : false)" class="badge badge-danger">{{ifshow ? content.likeNotice.unread : ''}}</span>
        <img src="http://static.nowcoder.com/images/head/like.png" class="mr-4 user-header" alt="通知图标">
				<div class="media-body">
					<h6 class="mt-0 mb-3">
						<span>赞</span>
						<span class="float-right text-muted font-size-12">{{(ifshow ? content.likeNotice.message.createTime : '') | datatime}}</span>
					</h6>
					<div>
						<a :href="'/noticedetail/like'">
              用户 <i>{{ ifshow ? content.likeNotice.user.name : ''}}</i> 点赞了你的<b>帖子</b> ...
            </a>
						<ul class="d-inline font-size-12 float-right">
							<li class="d-inline ml-2"><span class="text-primary">共 <i>{{ifshow ? content.likeNotice.count : ''}}</i> 条会话</span></li>
						</ul>
					</div>
				</div>
			</li>
			<li class="media pb-3 pt-3 mb-3 border-bottom position-relative" v-if="(ifshow ? (content.followNotice ? content.followNotice.count > 0 : false) : false)">
				<span v-if="(ifshow ? (content.followNotice.unread > 0) : false)" class="badge badge-danger">{{ ifshow ? content.followNotice.unread : ''}}</span>
        <img src="http://static.nowcoder.com/images/head/follow.png" class="mr-4 user-header" alt="通知图标">
				<div class="media-body">
					<h6 class="mt-0 mb-3">
						<span>关注</span>
						<span class="float-right text-muted font-size-12">{{(ifshow ? content.followNotice.message.createTime :'') | datatime}}</span>
					</h6>
					<div>
						<a :href="'/noticedetail/follow'">
              用户 <i>{{ ifshow ? content.followNotice.user.name : ''}}</i> 关注了你 ...
            </a>
						<ul class="d-inline font-size-12 float-right">
							<li class="d-inline ml-2"><span class="text-primary">共 <i>{{ifshow ? content.followNotice.count : ''}}</i> 条会话</span></li>
						</ul>
					</div>
				</div>
			</li>
		</ul>
	</div>
  </div>
</template>

<script>
export default {
    name:'notice',
	data(){
		return{
			content:null,
			ifshow:false,
		}
	},
	watch:{
        content(){
            this.setIfshow();
        }
	},
  mounted(){
    this.getnotice();
  },
	created(){
		this.setIfshow();
	},
	methods:{
        //判断对象是有值
		getnotice(){
 			this.$ajax.get(process.env.VUE_APP_SERVER + '/business/web/notice/list').then((response)=>{
				console.log("查询帖子列表结果：", response);
				this.content = response.data.content;
			})
		},
        setIfshow(){
            if(this.content != null){
                this.ifshow = true;
            }else{
                this.ifshow = false;
            }
        },
		 //跳转路由
        toRouter(id){
            this.$router.push({
                path:"/profile/" + id,
                name:"profile"
            })
        }
	}

}
</script>

<style lang="scss" scoped>
    @import '@/assets/style/css/global.scss';
    @import '@/assets/style/css/letter.scss';
    .box{
        // border: 1px solid red;
    }
</style>